﻿<!DOCTYPE html>
<html>
	<head>
		<base href="/">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<link rel="stylesheet" href="css/login.css" />
		<link rel="stylesheet" href="css/footer&cbl.css" />
		<link rel="stylesheet" href="css/daohang.css" />
		<link rel="stylesheet" href="css/element.css" />
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/jquery-1.11.3.js" ></script>		
		<script type="text/javascript" src="js/bootstrap.js" ></script>
		<script type="text/javascript" src="js/templet.js" ></script>
		<script type="text/javascript" src="js/hp.js" ></script>
		<script type="text/javascript" src="js/axios.js" ></script>
		<script type="text/javascript" src="js/element.js" ></script>

		<title></title>
	</head>
	<body class="login-body" >
		<div id="main" v-cloak>
			<nav class=" navbar-inverse" id="daohang">
				<div class="daohang">
					<div class="navbar-header clearfix">
						<button type="button" class="zd" id="zd" >
							<span class="glyphicon glyphicon-align-justify"></span>
						</button>
					</div>
					<div class="collapse navbar-collapse" id="daohangtiao">
						<span class="close"><a href="index.html"><i></i></a></span>					
					</div>						
				</div>
				<div id="box">
					<div class="box1 col-sm-2 col-xs-2">
						<span id="X" class="glyphicon glyphicon-remove pull-right" ></span>
					</div>
					<div class="box2 col-sm-10 col-xs-10" >
						<ul id="ul1"class="clearfix">
							<li><a href="index.html">首页</a></li>
							<li><a href="templet.html">模板</a></li>
							<li><a href="setmeal.html">套餐</a></li>
							<li><a href="example.html">案例</a></li>
							<li id="wd"><a>文档<i class="glyphicon glyphicon-menu-right"></i></a></li>
							<li id="gy"><a>关于<i class="glyphicon glyphicon-menu-right"></i></a></li>
						</ul>
						<div id="wd1">
							<ul>
								<li id="fanhui1"><a>返回上一级</a></li>
								<li><a>教程中心</a></li>
								<li><a>建站资讯</a></li>
								<li><a>更新日志</a></li>
							</ul>
						</div>
						<div id="gy1" >
							<ul id="ul2">
								<li id="fanhui2"><a>返回上一级</a></li>
								<li id="gcxx"><a>公司信息<i class="glyphicon glyphicon-menu-right"></i></a></li>
								<li><a>荣誉资质</a></li>
								<li><a>联系客服</a></li>
							</ul>
						</div>
						<div id="gc" >
							<ul >
								<li id="fanhui3"><a>返回上一级</a></li>
								<li><a>公司介绍</a></li>
								<li><a>服务条款</a></li>
								<li><a>法律声明</a></li>
								<li><a>可接受服务</a></li>
								<li><a>免责声明</a></li>
							</ul>
						</div>
					</div>
				</div>
			</nav>
			<div class="main">
			<div class="container">
				<div class="c2">
<!--					<a href=""></a><span>-->
<!--						<img src="/img/qifeiye.png" />-->
<!--					</span></a>-->
					<p>从这里开启我的建站之旅</p>
				</div>
				<div class="c3">
					<div v-if="commonlogindiv">
						<form action="/login" method="post" >
							<div>
								<div  id="commonModel" >
									<div class="form-group">
										<label for="usernameoremail">账号</label>
										<input type="text" class="form-control" id="usernameoremail" name="username" v-model="genformdata.genusername">
									</div>
									<div class="form-group">
										<label for="password">密码</label>
										<input type="password" class="form-control" id="password" name="password" v-model="genformdata.genpassword">
									</div>
									<div class="form-group">
										<label for="usernameoremail">图型验证码</label>
										<div class="qrcode-box">
											<input type="text" class="form-control" id="imageCode" name="imageCode" v-model="genformdata.genimagecode">
											<label class="right-img"><img id="validImage" class="validImage" src="/gorillaSecurity/code/validCodeImage"/></label>
										</div>

									</div>
									<div class="checkbox">
										<label>
											<input type="checkbox" name="remember-me"> 记住我（请在私人计算机上使用此功能）
										</label>
									</div>
								</div>
								<div class="c3-1">
									<a @click="submitLogin" class="btn btn-default btn1">登录</>
									<a href="register.html" type="button" class="btn btn-default btn2">注册</a>
								</div>
							</div>

							<div class="c3-2 clearfix">
								<span class="c3-2-2">其他方式登录：</span>
								<div class="c3-2-1">
									<a id="SmsLogn"  title="使用短信验证码登录 " @click="changeSms"><span class="sms"></span></a>
									<a href="/qqLogin/callback.do" title="使用腾讯QQ登录"><span class="s1"></span></a>
									<a href="/qqLogin/weixin" title="使用微信登录"><span class="s2"></span></a>
								</div>
							</div>
							<div class="c3-3 clearfix">
								<a href="" class="pull-right">忘记密码？点这里找回</a>
							</div>
						</form>
					</div>

					<div  v-if="smslogindiv">
						<form action="/sms/login" method="post">
							<div>
								<div>
									<div class="form-group">
										<label for="usernameoremail">手机号</label>
										<input type="text" class="form-control" id="mobile" name="mobilephone" v-model="smsformdata.smsmobilephone">
									</div>
									<div class="form-group">
										<label for="usernameoremail">短信验证码</label>
										<div class="qrcode-box">
											<input type="text" class="form-control" id="smscode" name="smsCode" v-model="smsformdata.smsCode">
											<label class="right-img"><a class="smscodeclass" @click="getsmscode">获取验证码</a></label>
										</div>
									</div>
								</div>
								<div class="c3-1">
									<a @click="smsLogin"  class="btn btn-default btn1">登录</a>
									<a href="register.html" type="button" class="btn btn-default btn2">注册</a>
								</div>
							</div>

							<div class="c3-2 clearfix">
								<span class="c3-2-2">其他方式登录：</span>
								<div class="c3-2-1">
									<a title="用户名密码登录 " @click="changeCommon"><span class="common"></span></a>
									<a href="/qqLogin/callback.do" title="使用腾讯QQ登录"><span class="s1"></span></a>
									<a href="/qqLogin/weixin" title="使用微信登录"><span class="s2"></span></a>
								</div>
							</div>
							<div class="c3-3 clearfix">
								<a href="" class="pull-right">忘记密码？点这里找回</a>
							</div>
						</form>
					</div>

				</div>
			</div>
		</div>
		<ul class="cbl" >
			<li><a href="#">
				<div class="icon d1"><i class="i1"></i><span class="title">在线客服</span></div>
			</a></li>
			<i class="clearfix"></i>
			<li><a href="#">
				<div class="icon d2"><i class="i2"></i><span class="title">4006285729</span></div>
			</a></li>
			<i class="clearfix"></i>
			<li><a  href="#">
				<div class="icon"><i class="i3"></i><span class="title">教程中心</span></div>
			</a></li>
			<i class="clearfix"></i>
			<li ><a  href="#">
				<div class="icon d4" data-toggle="tooltip" data-placement = "left" title="<img src='img/erweima.png'><br/> 关注微信 " data-html="true"><i class="i4"></i></div>
			</a></li>
		</ul>
		</div>
		
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el: '#main',
			data: {
				smslogindiv:false,
				commonlogindiv:true,
				smsCode:"",
				genformdata:{
					genusername:"13719324114",
					genpassword:"123456",
					genimagecode:""
				},
				smsformdata:{
					smsmobilephone:"13719324114",
					smsCode:""
				}
			},
			methods:{
				changeSms:function () {
					this.smslogindiv = true;
					this.commonlogindiv = false;
				},
				changeCommon:function(){
					this.smslogindiv = false;
					this.commonlogindiv = true;
				},
				getsmscode:function(){
					_that = this;
					axios.get("/gorillaSecurity/code/smsValidCode").then(res=>{
						_that.smsformdata.smsCode = res.data;
					})
				},
				responRespon:function(res){
					if(res.status==1001){
						window.location.href = res.redirectUrl;
					}else if(res.status=1002){
						this.$message.error(res.msg)
					}
				},
				submitLogin:function(){
					_that = this;
					var data = {
						username:_that.genformdata.genusername,
						password:_that.genformdata.genpassword,
						imageCode:_that.genformdata.genimagecode,
					}

					if(!data.username){
						_that.$message("请填写账户")
						return;
					}else if(!data.password){
						_that.$message("请填写密码")
						return;
					}else if(!data.imageCode){
						_that.$message("请填写验证码")
						return;
					}

					$.post("/login",data,function(res){
						_that.responRespon(res);
					})
				},
				smsLogin:function(){
					_that = this;
					var data = {
						mobilephone:_that.smsformdata.smsmobilephone,
						smsCode:_that.smsformdata.smsCode,
					}
					console.log(data)
					if(!data.mobilephone){
						_that.$message("请填写手机号码")
						return;
					}else if(!data.smsCode){
						_that.$message("请填短信验证码")
						return;
					}
					$.post("/sms/login",data,function(res){
						_that.responRespon(res);
					})
				}
			},
			created(){

			}


		})
	</script>
</html>
